<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-input size="small" v-model="searchMap.nickname" placeholder="昵称"></el-input>
      <el-select v-model="searchMap.mch_id" clearable placeholder="注册渠道">
        <el-option v-for="item in allData.merchant_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.status" clearable placeholder="状态">
        <!-- <el-option v-for="(item,index) in allData.status_list" :key="index" :label="item" :value="index"></el-option> -->
        <el-option label="正常使用" :value="0"></el-option>
        <el-option label="已禁用" :value="1"></el-option>
      </el-select>
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd hh:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" style="width:100%" :height="tHeight" class="table-box">

      <el-table-column label="用户信息" width="200">

            <template slot-scope="scope"> 
              <div class="commodity-name">
              <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row.uc_avator" style="max-width: 300px; max-height: 300px;"/>
              <img slot="reference" class="commodity-image" :src="scope.row.uc_avator" :alt="scope.row.uc_avator">
			   </el-popover>
              <p style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.uc_nickname}}</p>
              </div>
            </template>
            
        </el-table-column>
      <el-table-column label="用户id" prop="uc_uid"></el-table-column>
      <el-table-column label="真实姓名" prop="uc_realname"></el-table-column>
      <el-table-column label="手机号" prop="uc_mobile" width="140"></el-table-column>
      <el-table-column label="openid" prop="uc_openid"></el-table-column>
      <el-table-column label="性别" width="100">
        <template slot-scope="scope">
          <p v-if="scope.row.uc_sex==1">男</p>
          <p v-else>女</p>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="uc_city">
        <template slot-scope="scope">
          <p>{{scope.row.uc_city}}{{scope.row.uc_province}}{{scope.row.uc_address}}</p>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="uc_created_at" width="156"></el-table-column>
      <el-table-column label="所属渠道" prop="">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.form_arr" :key="index">{{item}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status_txt" width="100"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status_txt!='正常使用'" @click="handleDisable(0,scope.row)" size="mini" type="primary">启用</el-button>
          <el-button v-else @click="handleDisable(1,scope.row)" size="mini" type="danger">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <EditDialog :isEdit="isEdit" :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";

import EditDialog from "./EditDialog.vue";
import userApi from "@/api/user";

@Component({
  components: {EditDialog }
})
export default class userList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() allData: any = []; // 所以数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() status: any = '';//禁用状态
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() searchData: any = {
    pageNum: 1
  };

  @Provide() formData: any = {
    id:"",
    advertisersName:"",
    advertisersKey: "",
    appid:""
  };
  @Provide() searchMap:{
    nickname: string,
    mch_id:string,
    status:string,
    begin_time:string,
    end_time:string,
  }={
    nickname:'',
    mch_id:'',
    status:'',
    begin_time:'',
    end_time:'',
  }
  // 禁用启用
  handleDisable(i,row:any){
    if(i==1){
      this.status=1
    }else{
      this.status=0
    }
    userApi.disabledUser(row.uc_uid,this.status)
    .then((res: any) => {
      if(res.data.status){
        this.$message({
          message: '操作成功',
          type: "success"
        });
      }
      this.loadData()
    });
  }

  
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
  }
  created() {
    this.loadData();
  }

  loadData() {
    userApi.userList(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.tableData = res.data.data.user_list.data;
        this.allData = res.data.data;
        this.total = res.data.data.user_list.total;
        this.loading=false
      });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    if(this.dateTime==null){
      this.dateTime=["",""]
    }
    this.searchMap.begin_time=this.dateTime[0]
    this.searchMap.end_time=this.dateTime[1]
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.el-table .cell {
  text-align: center !important;
}
.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
</style>
